<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>商品详情</title>
	<link rel="stylesheet" href="/themes/css/core.css">
	<link rel="stylesheet" href="/themes/css/icon.css">
	<link rel="stylesheet" href="/themes/css/home.css">
	<style>
		html,body{
			touch-action: none;
		}
		.m-button {
			padding: 0 0.24rem;
		}

		.btn-block {
			text-align: center;
			position: relative;
			border: none;
			pointer-events: auto;
			width: 100%;
			display: block;
			font-size: 1rem;
			height: 2.5rem;
			line-height: 2.5rem;
			margin-top: 0.5rem;
			border-radius: 3px;
		}

		.btn-primary {
			background-color: #04BE02;
			color: #FFF;
		}

		.btn-warning {
			background-color: #FFB400;
			color: #FFF;
		}
		.mask-black {
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			top: 0;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			z-index:999;
		}

		.m-actionsheet {
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
			background-color: #EFEFF4;
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
			-webkit-transition: -webkit-transform .3s;
			transition: -webkit-transform .3s;
			transition: transform .3s;
			transition: transform .3s, -webkit-transform .3s;
		}
		.actionsheet-toggle {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		.actionsheet-item {
			display: block;
			position: relative;
			font-size: 0.8rem;
			color: #555;
			height: 2rem;
			line-height: 2rem;
			background-color: #FFF;
		}
		.actionsheet-item:after {
			content: '';
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			border-bottom: 1px solid #D9D9D9;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
		}
		.actionsheet-action {
			display: block;
			margin-top: .15rem;
			font-size: 0.8rem;
			color: #555;
			height:3rem;
			line-height: 3rem;
			background-color: #FFF;
			position:absolute;
			top:10px;
			right:0;
		}

	</style>
</head>
<body>
	<header class="aui-header-default aui-header-fixed aui-header-bg">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back-white"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">柠檬味苏打饮料375ml/瓶</div>
		</div>
	</header>
	<div class="aui-banner-content aui-fixed-top" data-aui-slider>
		<div class="aui-banner-wrapper">
			<div class="aui-banner-wrapper-item">
				<a href="#">
					<img src="/themes/img/pd/pd-zf-1.jpg">
				</a>
			</div>
			<div class="aui-banner-wrapper-item">
				<a href="#">
					<img src="/themes/img/pd/pd-zf-2.jpg">
				</a>
			</div>
			<div class="aui-banner-wrapper-item">
				<a href="#">
					<img src="/themes/img/pd/pd-zf-3.jpg">
				</a>
			</div>
			<div class="aui-banner-wrapper-item">
				<a href="#">
					<img src="/themes/img/pd/pd-zf-4.jpg">
				</a>
			</div>
			<div class="aui-banner-wrapper-item">
				<a href="#">
					<img src="/themes/img/pd/pd-zf-5.jpg">
				</a>
			</div>
		</div>
		<div class="aui-banner-pagination"></div>

	</div>
	<div class="aui-product-content">
		<div class="aui-real-price clearfix">
			<span>
				<i>￥</i>0.01元
			</span>
		</div>
		<div class="aui-product-title">
			<h2>
				柠檬味苏打饮料375ml/瓶
			</h2>
			<p>
				名仁 果味苏打饮料（柠檬味）375ml/瓶
			</p>
		</div>
		<div class="aui-product-strip">
			<img src="/themes/img/bg/ssy.jpg" alt="">
		</div>
		<div class="aui-dri"></div>
	</div>

	<footer id="footer" class="aui-footer-product">
		<div class="aui-footer-product-fixed">
			<div class="aui-footer-product-concern-cart">
				<a href="#">
					<span class="aui-f-p-icon"><img src="/themes/img/icon/icon-kf.png"></span>
					<span class="aui-f-p-focus-info">联系客服</span>
				</a>
			</div>
			<div class="aui-footer-product-action-list">
				<a href="javascript:void(0);" @click="buyNow();" class="red-color">立即购买</a>
			</div>
		</div>
	</footer>
	<script src="/themes/js/jquery.min.js"></script>
	<script src="/themes/js/aui.js"></script>
	<script src="/themes/js/aui-down.js"></script>
	<script src="/themes/js/vue.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#footer',
			data: {
				enableClick : true
			},
			methods: {
				buyNow: function () {
					if(vm.enableClick) {
						vm.enableClick = false;
						window.location.replace('/index/buynow/goods_id/<?php echo $id;?>');
					}
				}
			}
		});
	</script>
</body>
</html>
